/*
 * @Description: 单个站点下的线路列表模块
 * @Author: yingying.fan
 * @Date: 2019-07-01 12:55:00
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-07-01 12:55:00
 */
<template>
  <div class="nearby-site-item-wrapper">
    <!-- 站点信息 -->
    <div
      class="flex-h flex-vc nearby-site-item-station"
      @click="goToStationDetail"
    >
      <i class="iconfont icon-station baseColorNoAcitve"></i>
      <p class="fontsize28">{{stationInfo.stationName}}</p>
      <span class="flex1 fontsize24">距您{{stationInfo.distance}}</span>
    </div>
    <!-- 线路公交数据 -->
    <div class="nearby-site-item-bus-list">
      <!-- 这个div脱离文档流，宽度为子元素宽度之和，无需计算宽度了 -->
      <div class="flex-h line-bus-list-wrapper">
        <!-- :style="busListWidth" -->
        <!-- 列表最多展示5条 -->
        <nearby-bus
          v-for="(item,index) in stationInfo.busList.slice(0,5)"
          :key="`nearby_bus${index}`"
          :busInfoList="item"
        ></nearby-bus>
        <div
          class="fontsize24 look-all-btn"
          @click="goToStationDetail"
          v-if="stationInfo.busList.length > 5"
        >
          <span>查看全部</span>
          <i class="iconfont icon-rightangel"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NearbyBusItem from './NearbyBusItem'
import StationInfoModel from './model/StationInfoModel'
export default {
  components: {
    'nearby-bus': NearbyBusItem
  },
  props: {
    stationInfo: {
      type: StationInfoModel
    }
  },
  data() {
    return {

    }
  },
  // computed: {
  //   busListWidth() {
  //     if (this.stationInfo) {
  //       let style = 'min-width:' + (this.stationInfo.busList.length * 70.7 + 24) + '%;'
  //       style += 'max-width:' + (this.stationInfo.busList.length * 82.7 + 24) + '%;'
  //       console.log('~~~', style)
  //       return style
  //     } else {
  //       return ''
  //     }
  //   }
  // },
  methods: {
    goToStationDetail() {
      // 埋点
      let recordInfo = {
        NAERBY_SITE_ID: this.stationInfo.stationId + '',
        NAERBY_SITE_NAME: this.stationInfo.stationName + ''
      }
      this.$ThirdParty.then(ThirdParty => {
        ThirdParty.doRecordEvent(
          'home_site_nearby',
          recordInfo,
          1,
          () => { },
          () => { }
        )
      })
      // 跳转
      let params = `NAME=${this.stationInfo.stationName}&ID=${this.stationInfo.stationId}&START_LOACTION_LNG=${this.stationInfo.longitude}&START_LOACTION_LAT=${this.stationInfo.latitude}`
      // let url = 'xbapp://open/bus-app/siteDetails.html?' + params
      let url = 'xbapp://open/bus-app/StationDetails.html?_tv=false&' + params
      if (window.prodInApp) {
        window.location.assign(url)
      } else {
        console.log('~~~goToStationDetail~~~', url)
      }
    }
  }
}
</script>

<style>
.nearby-site-item-wrapper {
  width: 100%;
  height: 260px;
  margin-bottom: 16px;
  overflow: hidden;
}
.nearby-site-item-station {
  height: 90px;
  padding: 0 30px;
  color: #666666;
}
.nearby-site-item-station > i {
  width: 42px;
  font-size: 30px;
  text-align: center;
  /* font-weight: bold; */
}
.nearby-site-item-station > p {
  max-width: 65%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nearby-site-item-station > span {
  color: #aaaaaa;
  padding-left: 20px;
}
.nearby-site-item-bus-list {
  width: 100%;
  height: 170px;
  overflow-x: auto;
  overflow-y: hidden;
}
/* 横向滑动的容器，float:left 使元素脱离文档流，宽度为子元素宽度之和 */
.line-bus-list-wrapper {
  margin-top: 6px;
  float: left;
  padding: 0 30px;
}
.line-bus-list-wrapper::-webkit-scrollbar {
  display: none;
}
.look-all-btn {
  width: 180px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  /* background-color: #f9f9f9; */
  color: #333;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 1); /* px */
  border-radius: 8px;
}
.look-all-btn > * {
  display: inline-block;
}
.look-all-btn > i {
  font-size: 24px;
}
</style>
